<template>
  <div class="cate2">
    <h2>slot</h2>
    <div class="container">
      <!-- 游戏 -->
      <Category title="热门游戏列表">
        <ul>
          <li v-for="(item,index) in games" :key="index">{{ item.title }}</li>
        </ul>
      </Category> 

      <!-- 美食 -->
      <Category title="今日美食城市">
          {{ imgURl }}
      </Category> 

      <!-- 视频 -->
      <Category title="今日影视推荐">
        {{ video }}
      </Category> 
  </div>
  </div>
</template>

<script lang="ts" setup name="father">
import Category from './Category.vue'  
import {ref, reactive} from 'vue'

let games = reactive([
  {
    id: '001',
    title: 'game1111'
  },
  {
    id: '002',
    title: 'game2222'
  },
  {
    id: '003',
    title: 'game3333'
  },
  {
    id: '004',
    title: 'game4444'
  }
])


let imgURl = ref('图片地址') 
let video = ref('视频地址')
</script>

<style scoped>
  .cate2 {
    background: grey;
  }
  .container {
    display: flex;
    justify-content: space-around;
  }
</style>